window.onload = function() {
	//给新闻当导航栏添加样式
	//获取元素
	var tap = document.querySelectorAll('#ul_nav li')
	// console.log(tap)
	tap.forEach(function(item, index) {


		item.onclick = function(e) {

			// console.log(item)
			for (var i = 0; i < tap.length; i++) {
				tap[i].className = 'tap'

			}


			item.className = 'tap active_news'
		}

	})
	//进行新闻主版块的渲染
	var goodlist = [{
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		},
		{
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		},
		{
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		},

		{
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}, {
			id: 1,
			url: '../imges/news01.jpg',
			name: '11月金融行业广告投放技巧',
			cont1: '广告主下足功夫获取流量吸引用户来到落地页面，却没能形成购买或留单转化? 页面内容很有',
			cont2: '吸引力依然无法获取有效线索? 如果说落地页是数字广告转化的第一生产力，那么表单设计则是一种',
			timer: '2个小时前',
			views: '1.45K',
			label: '产品运营'
		}
	]
	var goodText = [{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		}

	]
	var goodTexts = [{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		}
	
	]
	var goodTextss = [{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		},
		{
			url: '../imges/news_right01.png',
			cont1: '移动互联网2017年Q2夏',
			cont2: '季报告：生态流量详情和流向情况',
			timer: '2017年7月12日'
		}
	
	]
	newsLeft(goodlist)
	navNews(goodText)
	R_articles(goodTexts)
	R_classic(goodTextss)
	function newsLeft(arr) {

		arr.forEach(function(item, index) {
			var nesw01 = document.querySelector('#nesw01')
			var goods = document.createElement('div')
			//渲染
			goods.innerHTML += '<div id="news_subject">' +
				'<ul class="subject_img">' +
				'<li><img src="' + item.url + '"><span>' + item.label + '</span></li>' +
				'</ul>' +
				'<ul class="subject_text">' +
				'<li><a href="javascript:void(0)">' + item.name + '</a></li>' +
				'<li>' + item.cont1 + '</li>' +
				'<li>' + item.cont2 + '</li>' +
				'<li>' + item.timer + '<span class="iconfont icon-yanjing-copy">' + item.views + '</span></li>' +
				'</ul>' +
				'<div id="span_03">' +
				'</div>' +
				'</div>'

			nesw01.appendChild(goods);
		})
	}

	function navNews(arr1) {
		arr1.forEach(function(items, index) {
			var right_nav01 = document.querySelector('#right_nav01')
			var goods = document.createElement('div')
			goods.innerHTML += ' <div id="right_nav0">'+
							 	'<ul class="right_bg01">'+
							 		'<li><img src="'+items.url+'" ></li>'+
							 '	</ul>'+
							 '	<ul class="right_text01">'+
							 		'<li>'+items.cont1+'</li>'+
							 		'<li>'+items.cont2+'</li>'+
							 		'<li>'+items.timer+'</li>'+
							 	'</ul> '+
							 '</div>'
			right_nav01.appendChild(goods)
		})
	}

	//
	function R_articles(arr1) {
		arr1.forEach(function(items, index) {
			var R_articles = document.querySelector('#R_articles')
			var goods = document.createElement('div')
			goods.innerHTML += ' <div id="right_nav0">'+
							 	'<ul class="right_bg01">'+
							 		'<li><img src="'+items.url+'" ></li>'+
							 '	</ul>'+
							 '	<ul class="right_text01">'+
							 		'<li>'+items.cont1+'</li>'+
							 		'<li>'+items.cont2+'</li>'+
							 		'<li>'+items.timer+'</li>'+
							 	'</ul> '+
							 '</div>'
			R_articles.appendChild(goods)
		})
	}
	
function R_classic(arr1) {
		arr1.forEach(function(items, index) {
			var R_classic = document.querySelector('#R_classic')
			var goods = document.createElement('div')
			goods.innerHTML += ' <div id="right_nav0">'+
							 	'<ul class="right_bg01">'+
							 		'<li><img src="'+items.url+'" ></li>'+
							 '	</ul>'+
							 '	<ul class="right_text01">'+
							 		'<li>'+items.cont1+'</li>'+
							 		'<li>'+items.cont2+'</li>'+
							 		'<li>'+items.timer+'</li>'+
							 	'</ul> '+
							 '</div>'
			R_classic.appendChild(goods)
		})
	}














}
